import React, { Fragment, PureComponent } from 'react';

import StandardTable from '../StandardTable';
import '@ant-design/compatible/assets/index.css';
import { Button, Card, Col, Divider, Form, message, Popconfirm, Row } from 'antd';
import isEqual from 'lodash.isequal';
import { createFilter, getListColumn } from '../../utils/component';
import Authorized from '../Authorized/Authorized';
import styles from './DataList.less';
import InfoModal from './InfoModal';
import frSchema from '@/outter/fr-schema/src';
import { exportData } from '../../utils/xlsx';
import ImportModal from '../modal/ImportModal';
import { exportDataByTemplate } from '../../utils/xlsx';
import * as _ from 'lodash';
import { LoadingOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';

const { actions, schemas, decorateList, decorateItem, getPrimaryKey } = frSchema

const getValue = (obj) =>
    Object.keys(obj)
        .map((key) => obj[key])
        .join(",")

/**
 * 基于 schema 对象自动生成列表组件
 * @class
 * @extends React.PureComponent
 * @author wuhanchu
 * @tutorial destroy Destroying a Widget
 *
 */
class DataList extends PureComponent {
    state = {
        data: {
            list: [],
            pagination: {},
        },
        loading: false,
        listLoading: true,
        visibleModal: false,
        updateVisibleModal: false,
        expandForm: false,
        selectedRows: [],
        searchValues: {},
        infoData: {},
        tableFooter: [],
    }
    schema = {}

    formRef = React.createRef();

    /**
     * @constructs
     * @param {object} props 属性
     * @param {string} meta 类型元数据
     * operateWidth: 操作宽度
     * scroll: table whether can scroll
     * selectedRows
     * showSelect
     * resource: schema resource name ，
     * schema: schema name,
     * service: remote service,
     * title: page title,**adf**
     * infoProps: infoForm propsrefreshMeta
     * handleChangeCallback: data change call back
     * queryArgs: fixed query args
     * allowExport
     * offline: 是否开启离线模式
     */
    constructor(props, meta) {
        super(props)
        this.init(props, meta)
    }

    /**
     * create search filter
     * @deprecated
     * @param params
     */
    createFilters(inSchema, span = 4) {
        Object.keys(inSchema).map((key) => {
            if (inSchema[key] && (inSchema[key].type === undefined || inSchema[key].type === "InputNumber" || inSchema[key].type === "Input")) {
                inSchema[key].props = {
                     onPressEnter: (e) => {
                        if (e.target.value) {
                            this.formRef.current && this.formRef.current
                                .validateFields()
                                .then(async fieldsValue => {
                                    (this.props.handleSearch && this.props.handleSearch(fieldsValue)) || (this.handleSearch && this.handleSearch(fieldsValue))
                                })
                                .catch(err => {
                                    console.log("err", err)
                                }).finally(_ => {
                                    // this.setState({ loadingSubmit: false })
                                })
                        }
                    },
                    ...inSchema[key].props,
                }
            }
        })
        return createFilter(this.formRef, inSchema, span)
    }

    async componentDidMount() {
        await this.refreshList()
        this._ismounted = true
        let list = [];
        this.columns.map((item) => item.showFooter && list.push({ key: item.key, title: item.title }))
        this.setState({ tableFooter: [...list] });
    }

    /**
     * 组件初始化
     * @param props
     * @param meta
     */
    init(props, meta) {
        // 设置meta
        this.meta = { ...(this.meta || {}), ...meta, ...(props.meta || {}) }
        this.refreshMeta()

        // 设置 state
        const tempState = {
            data: {
                list: props.value || [],
                pagination: {},
            },
            listLoading: true,
            visibleModal: false,
            updateVisibleModal: false,
            expandForm: false,
            selectedRows: [],
            searchValues: {},
            infoData: {},
        }

        if (this._ismounted) {
            this.setState(tempState)
        } else {
            this.state = tempState
        }
    }

    /**
     * 更新组件的元数据信息
     */
    refreshMeta() {
        this.schema =
            this.props.schema || this.meta.schema || schemas[this.meta.resource]
        this.service = this.meta.service || this.service
        this.meta.idKey = frSchema.getPrimaryKey(this.schema)
        if (this.meta.authorityKey) {
            if (this.meta.authoritySuffix) {
                this.meta.authority = {
                    add: this.meta.authoritySuffix + "_" + this.meta.authorityKey + "_post",
                    update: this.meta.authoritySuffix + "_" + this.meta.authorityKey + "_patch",
                    delete: this.meta.authoritySuffix + "_" + this.meta.authorityKey + "_delete",
                    export: this.meta.authoritySuffix + "_" + this.meta.authorityKey + "_export",
                    show: this.meta.authoritySuffix + "_" + this.meta.authorityKey + "_get_by_id",
                }
            } else {
                this.meta.authority = {
                    add: this.meta.authorityKey + "_post",
                    update: this.meta.authorityKey + "_patch",
                    delete: this.meta.authorityKey + "_delete",
                    export: this.meta.authorityKey + "_export",
                    show: this.meta.authorityKey + "_get_by_id",
                }
            }

        }
    }

    /**
     * 获取当前显示的字段列表
     * @param includeOperation 包含操作
     * @returns {Array|null}
     */
    getColumns(includeOperation = true) {
        const { renderOperateColumn } = this.props
        const { fields } = this.meta

        let columns = getListColumn({...this.schema, ...this.schemaOther}, fields)

        let operationBar = null
        if (renderOperateColumn !== null && includeOperation) {
            operationBar = renderOperateColumn
                ? renderOperateColumn.bind(this)()
                : this.renderOperateColumn()
        }

        columns.sort(function (a, b) {
            return (
                (a.orderIndex === undefined || a.orderIndex === null
                    ? 9999
                    : a.orderIndex) -
                (b.orderIndex === undefined || b.orderIndex === null
                    ? 9999
                    : b.orderIndex)
            )
        })

        operationBar && columns.push(operationBar)
        this.columns = columns
        console.debug("this.columns", this.columns)
        return this.columns
    }

    /**
     * 表格操作列
     * @returns {{width: string, fixed: (*|string), title: string, render: (function(*, *=): *)}}
     */
    renderOperateColumn(props = {}) {
        const { scroll } = this.meta
        const { inDel } = this.state
        const { showEdit = true, showDelete = true } = { ...this.meta, ...props }
        return (
            !this.meta.readOnly &&
            !this.props.readOnly && {
                title: "操作",
                width: this.meta.operateWidth,
                fixed: "right",
                render: (text, record) => (
                    <Fragment>
                        {showEdit && (
                            <Authorized
                                authority={
                                    this.meta.authority &&
                                    this.meta.authority.update
                                }
                                noMatch={null}
                            >
                                <a
                                    onClick={() =>
                                        this.handleVisibleModal(
                                            true,
                                            record,
                                            actions.edit
                                        )
                                    }
                                >
                                    修改
                                </a>
                                {showEdit && <Divider type="vertical" />}

                            </Authorized>
                        )}
                        {showDelete && (
                            <Authorized
                                authority={
                                    this.meta.authority &&
                                    this.meta.authority.delete
                                }
                                noMatch={null}
                            >
                                <Popconfirm
                                    title={this.state.deletePopconfirmText || "是否要删除此行？"}
                                    getPopupContainer={
                                        document.getElementsByClassName("ant-pro-table")
                                            .length
                                            ? () => {
                                                  let len = document.getElementsByClassName(
                                                      "ant-pro-table"
                                                  ).length
                                                  return document.getElementsByClassName(
                                                      "ant-pro-table"
                                                  )[len - 1]
                                              }
                                            : undefined
                                    }
                                    onConfirm={async (e) => {
                                        this.setState({ record })
                                        await this.handleDelete(record)
                                        e.stopPropagation()
                                    }}
                                >
                                    <a>{inDel && this.state.record.id && this.state.record.id === record.id && <LoadingOutlined />}删除</a>
                                </Popconfirm>
                            </Authorized>
                        )}
                        {this.renderOperateColumnExtend(record)}
                    </Fragment>
                ),
            }
        )
    }

    /**
     * 表格操作列，扩展方法
     */
    renderOperateColumnExtend(record) {
    }

    componentWillReceiveProps(nextProps, nextContents) {
        if (nextProps.meta && nextProps.meta !== this.props.meta) {
            this.meta = nextProps.meta
            this.columns = null
            this.refreshMeta()
            this.setState(
                {
                    pagination: null,
                    searchValues: {},
                },
                () => {
                    this.refreshList()
                }
            )
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevState.data !== this.state.data) {
            this.props.onChange && this.props.onChange(this.state.data.list)
        }
    }

    async refreshList(param) {
        let moreData = this.formRef && this.formRef.current && this.formRef.current.getFieldsValue()
        if(this.state.searchValues&& this.state.searchValues.order){
            moreData.order = this.state.searchValues.order
        }
        if(param){
            this.setState({searchValues: {...param,...moreData}})
        }else{
            this.setState({searchValues: {...moreData}})

        }
        if (!this.service || this.props.offline) {
            this.setState({
                data: {
                    ...(this.state.data || {}),
                    list:
                        decorateList(
                            this.state.data && this.state.data.list,
                            this.schema
                        ) || [],
                },
                listLoading: false,
            })
            return
        }

        this.setState({ listLoading: true }, async () => {
            let data = await this.requestList()
            let list = decorateList(data.list, {...this.schema,...this.schemaOther})
            this.convertList && (list = this.convertList(list))

            this.setState({
                selectedRows: [],
                data: {
                    ...data,
                    list,
                },
                listLoading: false,
            })
        })
    }

    /**
     * 个性化转换对应的list数据
     * @param list
     * @returns {*}
     */
    convertList(list) {
        return list
    }

    /**
     * 查询当前数据
     * @returns {Promise<*>}
     */
    async requestList(tempArgs = {}) {
        const { queryArgs } = this.meta
        if(this.state.exportLoading && this.state.selectedRows && this.state.selectedRows.length){
            tempArgs = {...tempArgs, id: this.getSelectArray(this.state.selectedRows)}
        }
        let searchParams = this.getSearchParam()



        const params = {
            ...(queryArgs || {}),
            ...searchParams,
            ...(this.state.pagination || {}),
            ...tempArgs,
        }

        let data = await this.service.get(params, this.schema)
        data = this.dataConvert(data)
        return data
    }

    getSelectArray(recordList){
        let data = undefined
        const idKey = getPrimaryKey(this.schema)
        const valueList = recordList.map((record) => record[idKey])
        // invoke remote service
        data = "in.(" + valueList.join(",") + ")"
        return data
    }

    /**
     * get current search param
     */
    getSearchParam() {
        let searchParams = {}
        let searchValues = this.state.searchValues
        searchValues &&
            Object.keys(searchValues).forEach((key) => {
                if (!_.isNil(searchValues[key]) && searchValues[key] !== "") {
                    const prefix =
                        (this.schema[key] && this.schema[key].searchPrefix) ||
                        ""
                    let value = searchValues[key]
                    if (prefix === "like" || prefix === 'not.like') {
                        value = "*" + value + "*"
                    } else if (prefix === "cs" || prefix === "cd") {
                        value = "{" + value + "}"
                    }

                    searchParams[key] = (prefix ? prefix + "." : "") + value
                }
            })
        return searchParams
    }

    /**
     * 数据转换
     * @param data
     */
    dataConvert(data) {
        return data
    }

    handleStandardTableChange = (pagination, filtersArg, sorter) => {
        const { searchValues } = this.state
        let params = { ...searchValues }
        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = { ...obj }
            newObj[key] = getValue(filtersArg[key])
            return newObj
        }, {})

        Object.assign(params, filters)

        if (sorter.field) {
            params.order = `${sorter.field.replace("_remark", "")}${sorter.order == "ascend" ? ".asc" : ".desc"
                }`
        }

        this.setState(
            {
                pagination: {
                    currentPage: pagination.current,
                    pageSize: pagination.pageSize,
                },
                searchValues: params,
            },
            () => this.refreshList()
        )
    }

    handleSelectRows = (rows) => {
        this.setState({
            selectedRows: rows,
        })
    }

    /**
     * 充值查询
     */
    handleFormReset = () => {
        const { order } = this.props

        this.formRef.current.resetFields()
        this.setState(
            {
                pagination: { ...this.state.pagination, currentPage: 1 },
                searchValues: { order },
            },
            () => {
                this.refreshList()
            }
        )
    }

    // 搜索
    onSearch(fieldsValue) {
        //  更新列表
        const searchValues = { ...this.state.searchValues }

        Object.keys(fieldsValue).forEach((key) => {
            if (!fieldsValue[key]) {
                delete searchValues[key]
                return
            }

            searchValues[key] = fieldsValue[key]
        })

        this.setState(
            {
                pagination: { ...this.state.pagination, currentPage: 1 },
                searchValues,
            },
            async () => {
                this.refreshList()
            }
        )
    }

    /**
     * 处理搜索触发事件
     * @param e
     */
    handleSearch = (fieldsValue) => {
        this.onSearch(fieldsValue);
        // e.preventDefault()
    }

    /**
     * 信息界面展示
     * @param flag
     * @param record
     * @param action
     */
    handleVisibleModal = (flag, record, action) => {
        this.setState({
            visibleModal: !!flag,
            infoData: record,
            action,
        })
    }

    /**
     * 处理数据新增
     * @param data
     * @returns {Promise<void>}
     */
    async handleAdd(data, schema) {
        // 更新
        let response
        try {
            if (!this.props.offline) {
                response = await this.service.post(data, schema)
            } else {
                // 修改当前数据
                this.state.data.list.push(decorateItem(data, this.schema))
                this.setState({
                    data: this.state.data,
                })
            }

            this.refreshList()
            message.success("添加成功")
            this.handleVisibleModal()
        } catch (error) {
            message.error(error.message)
        }
        this.handleChangeCallback && this.handleChangeCallback()
        this.props.handleChangeCallback && this.props.handleChangeCallback()

        return response
    }

    /**
     * 处理数据更新
     * @param data
     * @returns {Promise<void>}
     */
    handleUpdate = async (data, schema, method = "patch") => {
        // 更新
        let response
        try {
            if (!this.props.offline) {
                response = await this.service[method](data, schema)
            }

            // 修改当前数据
            const idKey = getPrimaryKey(this.schema)

            this.state.data &&
                this.state.data.list.some((item, index) => {
                    if (data[idKey] == item[idKey]) {
                        this.state.data.list[index] = decorateItem(
                            data,
                            this.schema
                        )
                        return true
                    }
                })

            //
            this.setState({
                data: this.state.data,
            })
            this.refreshList()
            message.success("修改成功")
            this.handleVisibleModal()
        } catch (error) {
            message.error(error.message)
        }

        this.handleChangeCallback && this.handleChangeCallback()
        this.props.handleChangeCallback && this.props.handleChangeCallback()

        return response
    }

    /**
     * 处理数据删除
     * @param data
     * @returns {Promise<void>}
     */
    handleDelete = async (data) => {
        // 更新
        let response
        this.setState({
            inDel: true
        })

        const showMessage = (response && response.msg) || "操作成功"

        // 修改当前数据
        const idKey = getPrimaryKey(this.schema)

        if (!this.props.offline) {
            try {
                response = await this.service.delete({ id: data[idKey], ...data })
                message.success(showMessage)
                this.refreshList()

            } catch (error) {
                message.error(error.message)
            }
        }

        this.state.data.list.some((item, index) => {
            if (data[idKey] == item[idKey]) {
                this.state.data.list.splice(index, 1)
                return true
            }
        })
        this.setState({
            data: this.state.data,
            inDel: false
        })
        this.handleVisibleModal()
        this.handleChangeCallback && this.handleChangeCallback()
        this.props.handleChangeCallback && this.props.handleChangeCallback()

        return response
    }

    /**
     * multi delete data
     */
    handleDeleteMulti = async (recordList) => {
        // change current data
        this.setState({loadDeleteMulti: true})
        const idKey = getPrimaryKey(this.schema)
        const valueList = recordList.map((record) => record[idKey])

        this.state.data.list.forEach((item, index) => {
            if (valueList.indexOf(item[idKey]) >= 0) {
                this.state.data.list.splice(index, 1)
            }
        })
        this.setState({
            data: this.state.data,
        })

        // invoke remote service
        if (!this.props.offline) {
            let args = {}
            args[idKey] = "in.(" + valueList.join(",") + ")"
            await this.service.deleteMulti({...args, ...this.meta.addArgs})
        }
        this.setState({loadDeleteMulti: false})

        //  refresh current data
        this.refreshList()
        message.success("删除成功")
        this.handleChangeCallback && this.handleChangeCallback()
        this.props.handleChangeCallback && this.props.handleChangeCallback()
    }

    // 累加(主要是金额)
    reduceTableTotal(dataIndex) {
        let sumprice = this.state.data.list.reduce(function (total, currentValue, currentIndex, arr) {
            return total + parseFloat(currentValue[dataIndex.key]);
        }, 0);

        return dataIndex.title + ':' + sumprice.toFixed(2)
    }

    /**
     * 模块讲修改
     * @param nextProps
     */
    componentWillUpdate(nextProps, nextState) {
        if (!isEqual(this.state.data, nextState.data)) {
            this.props.onChange && this.props.onChange(this.state.data.list)
        }
    }

    async handleExport(){
        this.setState(
            { exportLoading: true },
            async () => {
                const columns = this.getColumns(false)
                let data = await this.requestList({
                    pageSize: 1000000,
                })
                data = decorateList(
                    data.list,
                    this.schema
                )

                if (this.meta.importTemplateUrl) {
                    await exportDataByTemplate(
                        this.meta.exportDataName || "导出数据",
                        data,
                        columns,
                        this.meta.importTemplateUrl
                    )
                } else {
                    exportData(
                        this.meta.exportDataName ||"导出数据",
                        data,
                        columns
                    )
                }
                this.setState({ exportLoading: false })
            }
        )
    }
    /**
     * 操作栏按钮
     */
    renderOperationButtons() {
        if (this.props.renderOperationButtons) {
            return this.props.renderOperationButtons()
        }

        return (
            <Fragment>
                <Authorized
                    authority={this.meta.authority && this.meta.authority.add}
                    noMatch={null}
                >
                    {!this.props.readOnly && !this.meta.addHide && (
                        <Button
                            type="primary"
                            onClick={() =>
                                this.handleVisibleModal(true, null, actions.add)
                            }
                        >
                            新增
                        </Button>
                    )}
                </Authorized>
                {this.meta.allowImport && (
                    <Authorized
                        authority={
                            this.meta.authority && this.meta.authority.export
                        }
                        noMatch={null}
                    >
                        <Button
                            onClick={() => {
                                this.setState({ visibleImport: true })
                            }}
                        >
                            导入
                        </Button>
                    </Authorized>
                )}
                {this.meta.allowExport && (
                    <Authorized
                        authority={
                            this.meta.authority && this.meta.authority.export
                        }
                        noMatch={null}
                    >
                        <Button
                            loading={this.state.exportLoading}
                            onClick={() => {
                                this.handleExport()
                            }}
                        >
                            导出
                        </Button>
                    </Authorized>
                )}
            </Fragment>
        )
    }

    downloadImportTemplate() {
    }

    /**
     * 渲染操作栏
     * @returns {*}
     */
    renderOperationBar() {
        const { showSelect, showDelete = true } = this.meta
        const { selectedRows } = this.state

        return (
            <div className={styles.tableListOperator}>
                <Row
                    type="flex"
                    justify="space-between"
                    className={styles.operationBar}
                >
                    <Col>
                        {this.renderOperationButtons()}
                        {showDelete && showSelect &&
                            selectedRows.length > 0 &&
                            this.renderOperationMulit()}
                    </Col>
                    <Col>{this.renderOperationExtend()}</Col>
                </Row>
            </div>
        )
    }

    /**
     * create the multi opertaion buttons
     */
    renderOperationMulit() {
        return (
            <span>
                <Authorized
                    authority={
                        this.meta.authority &&
                        this.meta.authority.delete
                    }
                    noMatch={null}
                >
                    <Popconfirm
                        title="是否要删除选中的数据？"
                        onConfirm={(e) => {
                            const { dispatch } = this.props
                            const { selectedRows } = this.state
                            this.handleDeleteMulti(selectedRows)
                        }}
                    >
                        <Button loading={this.state.loadDeleteMulti}>批量删除</Button>
                    </Popconfirm>
                </Authorized>
            </span>
        )
    }

    /**
     * 操作栏扩展
     */
    renderOperationExtend() {
    }

    /**
     * 列表扩展
     */
    renderExtend() {
    }

    // 列变化方法 (列设置勾选隐藏、显示等调用该方法)
    handleSettingColumnChange(changeColumn) {
    }

    /**
     * 渲染表格
     * @param inProps
     * @returns {*}
     */
    renderList(inProps = {}, other) {
        let { loading } = this.props
        const { showSelect, scroll, mini, tableSetting } = this.meta
        let { data, listLoading, selectedRows, tableFooter } = this.state

        // judge weather hide select
        let otherProps = {}

        if (!showSelect) {
            otherProps.rowSelection = null
        }

        if (scroll) {
            otherProps.scroll = scroll
        }

        if (mini) {
            otherProps.pagination = false
        }

        if (tableSetting) { // tableSetting：列表是否支持 column 过滤
            otherProps.tableSetting = true
            otherProps.handleSettingColumnChange = this.handleSettingColumnChange.bind(this)
        }

        const columns = this.getColumns()

        let footer = ''
        // 列表底部 显示统计数据(如金额)
        tableFooter && tableFooter.map((item) => footer += this.reduceTableTotal(item))
        if (footer) {
            otherProps.footer = () => <div>{footer}</div>
        }

        let {
            renderOperationBar,
        } = this.props

        // 操作栏
        let operationBar = null
        operationBar = this.renderOperationBar && this.renderOperationBar()
        if (renderOperationBar) {
            operationBar = renderOperationBar()
        }
        return (
            <StandardTable
                handleSearch={this.props.handleSearch || this.handleSearch}
                refreshList={this.refreshList.bind(this)}
                handleFormReset ={this.handleFormReset.bind(this)}
                form={this.formRef}
                operationBar={operationBar}
                bordered={true}
                rowKey={this.meta.idKey || "id"}
                selectedRows={selectedRows}
                loading={!data || loading || listLoading}
                data={data}
                columns={columns}
                size={"small"}
                other={other}
                searchLabelWidth={this.meta.searchLabelWidth}
                toolBarRender={this.meta.toolBarRender}
                search={this.meta.search}
                pagination={this.meta.pagination}
                onSelectRow={this.handleSelectRows}
                onChange={this.handleStandardTableChange}
                {...otherProps}
                showSelect={showSelect}
                searchSpan={this.state.searchSpan}
                cardProps= {this.meta.cardProps}
                {...inProps}
            />
        )
    }

    handleGetTitle(infoData, action){
        let title = this.meta.title
        if(action==="edit"){
            if(infoData.name){
                title = `修改(${infoData.name})`
            }else{
                title = "修改"
            }
        }
        if(action==='add'){
            title = "新增"
        }if(action==="show"){
            if(infoData.name){
                title = `查看(${infoData.name})`
            }else{
                title = "查看"
            }
        }
        return title
    }
    /**
     * 渲染信息弹出框
     * @param customProps 定制的属性
     * @returns {*}
     */
    renderInfoModal(customProps = {}) {
        if (this.props.renderInfoModal) {
            return this.props.renderInfoModal()
        }
        const { form } = this.props
        const renderForm = this.props.renderForm || this.renderForm
        const { resource, addArgs } = this.meta
        const { visibleModal, infoData, action } = this.state
        const updateMethods = {
            handleVisibleModal: this.handleVisibleModal.bind(this),
            handleUpdate: this.handleUpdate.bind(this),
            handleAdd: this.handleAdd.bind(this),
        }
        let title = this.handleGetTitle(infoData, action)

        return (
            visibleModal && (
                <InfoModal
                    renderForm={renderForm}
                    title={title}
                    action={action}
                    resource={resource}
                    {...updateMethods}
                    visible={visibleModal}
                    values={infoData}
                    addArgs={addArgs}
                    meta={this.meta}
                    service={this.service}
                    schema={this.schema}
                    {...this.meta.infoProps}
                    {...customProps}
                />
            )
        )
    }

    componentDidCatch(error, info) {
        // Display fallback UI
        this.setState({ hasError: true })
    }

    /**
     * create the common search bar
     * @param  {Object} filters the schema filed list
     */
    createSearchBar(filters, buttonStyle, searchSpan) {
        return (
            <Form ref={this.formRef} onFinish={this.props.handleSearch || this.handleSearch}>
                <Row gutter={8} type="flex" className='createSearchBar'>
                    {this.state.isFold?filters: filters.slice(0,3) }
                    {/* {this.renderSearchBarExtra()} */}
                    
                    <Col style={buttonStyle} span={searchSpan || 6}>
                        <div style={{display: 'inline-block', float:'right'}}>
                        {/* <Row style={{width: '100%'}}> */}
                        <Button
                                onClick={this.handleFormReset}
                            >
                                重置
                            </Button>
                            <Button
                                style={{ marginLeft: "6px",  }}

                            type="primary" htmlType="submit">
                                查询
                            </Button>
                            <span style={{marginLeft: '16px', lineHeight: '32px'}}>
                                <a onClick={()=>{
                                    this.setState({isFold: !this.state.isFold})
                                }}>
                                    {!this.state.isFold ? <>展开<DownOutlined style={{marginLeft: '5px'}}/></>: 
                                        <>收起<UpOutlined style={{marginLeft: '5px'}}/></>
                                    }
                                    
                                </a>
                            </span>
                            </div>
                        {/* </Row> */}
                    </Col>
                </Row>
            </Form>
            // <></>
        )
    }

    // 查询扩展
    renderSearchBarExtra() {
        return null
    }

    renderImportModal() {
        return (
            <ImportModal
                importTemplateUrl={this.meta.importTemplateUrl}
                schema={this.schema}
                onCancel={() => this.setState({ visibleImport: false })}
            />
        )
    }

    /**
     * 搜索的实现
     */
    renderSearchBar() {
    }

    render() {
        const { visibleModal, visibleImport } = this.state
        let {
            renderOperationBar,
            renderSearchBar,
            renderOperateColumn,
        } = this.props

        // 操作栏
        let operationBar = null
        operationBar = this.renderOperationBar && this.renderOperationBar()
        if (renderOperationBar) {
            operationBar = renderOperationBar()
        }

        // 搜索栏
        let searchBar = null
        if (renderSearchBar) {
            searchBar = renderSearchBar()
        } else if (renderSearchBar !== null) {
            searchBar = this.renderSearchBar && this.renderSearchBar()
        }


        return (
            <Fragment>
                <div id={this.meta.renderId} className={"dataList"}>
                    <Card bordered={false} style={{ width: "100%", }} bodyStyle={{paddingLeft: 0, paddingRight:0 }}>
                        {this.state.showSearchBar && <div className={styles.tableListForm}>{searchBar}</div>}
                        <div className={styles.tableList}>
                            {this.renderSearchForm && (
                                <div className={styles.tableListForm}>
                                    {this.renderSearchForm()}
                                </div>
                            )}
                            {this.state.showSearchBar && operationBar}
                            {this.renderList()}
                        </div>
                    </Card>
                    {visibleModal && this.renderInfoModal()}
                    {visibleImport && this.renderImportModal()}
                    {this.renderExtend && this.renderExtend()}
                </div>
            </Fragment>
        )
    }
}

export default DataList
